<template>
  <div class="info_card">
    <!-- 第一部分 -->
    <div class="level_info">
      <div class="level_time">
        <span>{{ t('club_page_dqdengji') }}</span> 
        <!-- <span>{{ props.introduction.next_blind_level_countdown }}</span> -->
        <span>{{ formattedTime }}</span>
      </div>
      <div class="level_status">
        <span>
          {{ t('club_page_mbet') }}<br/>
          {{ props.introduction.current_blind_amount }}
        </span>
        <span>
          {{ t('club_page_xiayiji') }}<br/>
          {{ props.introduction.next_blind_amount }}
        </span>
      </div>
    </div>

    <!-- 第二部分 -->
    <div class="reward_info">
      <div class="reward_title">
        <span>{{ t('club_page_bisaijiangli') }}</span>
        <span>{{ t('club_page_paimingj') }}</span>
      </div>
      <div class="reward_details">
        <div v-for="(reward, index) in props.introduction.ranking_info" :key="index" :style="{ color: getColor(index) }">
          {{ t('club_page_dijiming', {ranking: reward.ranking}) }}
          <span>₫ {{ reward.bonus || 0 }}</span>
        </div>
      </div>
    </div>

    <!-- 第三部分 -->
    <div class="buy_info">
      <div class="buy_in">
        <span>{{ t('club_page_qidongchouma')}}</span>
        <span>₫ {{ props.introduction.initial_amount }}</span>
      </div>
      <div class="participants">
        <span>
          {{ t('club_page_mairu') }}<br/>
          {{ props.introduction.need_chip }}
        </span>
        <span>{{ t('club_page_cansrenshu') }}<br/>{{ props.introduction.apply_count }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onUnmounted } from 'vue';

import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  introduction: {
    type: Object,
    default: {}
  },
})

const countdownTime = ref(0); // 剩余时间（秒）
const interval = ref<any>(null); // 定时器引用

// 格式化倒计时为 HH:mm:ss
const formattedTime = computed(() => {
  const hours = String(Math.floor(countdownTime.value / 3600)).padStart(2, "0");
  const minutes = String(Math.floor((countdownTime.value % 3600) / 60)).padStart(2, "0");
  const seconds = String(countdownTime.value % 60).padStart(2, "0");
  return `${hours}:${minutes}:${seconds}`;
});

 // 启动倒计时
const startCountdown = () => {
  if (interval.value) clearInterval(interval.value); // 清除之前的定时器
    interval.value = setInterval(() => {
    if (countdownTime.value > 0) {
      countdownTime.value -= 1;
    } else {
      clearInterval(interval.value); // 倒计时结束，停止计时器
    }
  }, 1000);
};

// 监听 props.introduction.next_blind_level_countdown 的变化
watch(
  () => props.introduction.next_blind_level_countdown,
  (newVal) => {
    countdownTime.value = newVal == -1 ? 0 : newVal; // 设置初始倒计时时间
    if (countdownTime.value > 0) {
      startCountdown();
    }
  },
  { immediate: true }
);

// 定义方法，根据 index 返回对应的颜色
const getColor = (index: number): string => {
  if (index === 0) return '#FFB700';
  if (index === 1) return '#C4C4C4';
  if (index === 2) return '#E89160';
  return '#FFFFFF'; // 默认颜色
};

// 组件卸载时清理定时器
onUnmounted(() => {
  if (interval.value) clearInterval(interval.value);
});
</script>

<style lang="scss" scoped>
.info_card {
  width: 347px;
  // height: 195px;
  margin: 0 auto;
  border-radius: 8px;
  background: #131232;
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
  padding: 10px 20px;
  color: #fff;

  .level_info,
  .reward_info,
  .buy_info {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }

  .level_info {
    text-align: center;
    // margin-top:  20px;

    .level_time {
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;

      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        display: block;
        margin-top: 18px;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .level_status {
      width: 225px;
      height: 40px;
      flex: 1;
      display: flex;
      justify-content: space-around;
      // margin-top: 10px;
      color: #FFF;
      font-size: 12px;
      font-weight: 400;
    }
  }

  .reward_info {
    margin-top:  10px;
    text-align: center;

    .reward_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;
      
      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        width: 100%;
        display: block;
        margin-top: 18px;
        font-size: 14px;
        font-weight: bold;
      }

    }

    .reward_details {
      display: flex;
      justify-content: space-around;
      width: 225px;
      height: 40px;
      flex: 1;
      color: #FFF;
      font-size: 12px;
      font-weight: 400;

      div {
        text-align: center;

        span {
          display: block;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }

  .buy_info {
    margin-top:  10px;
    text-align: center;
    border: none;

    .buy_in {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: bold;
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;

      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        width: 100%;
        display: block;
        margin-top: 18px;
      }
    }

    .participants {
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
      color: #FFFFFF;
      display: flex;
      justify-content: space-around;
      width: 225px;
      height: 40px;

      span:last-child {
        font-weight: 400;
      }
    }
  }
}
</style>